import React, { Component } from 'react'
import QueryList from '@/components/basicWidget/QueryList'
import { TableButton } from '@/components/basicWidget/Button'
import { getContext } from '@/context/common/applicationContext'
import { Popconfirm, message } from 'antd'
import FormBuilder from '@/components/basicWidget/FormWidget/FormBuilder'
import './index.css'
import { deleteSchema } from '@/service/schema/schemaService'

/**
 * 将上下文对象中的属性映射到新对象中
 * 此函数用于从上下文对象中提取特定属性，并将其包含在一个新的对象中返回
 * 主要用于在组件中获取所需的上下文属性，以便在组件中使用
 * 
 * @param {Object} context - 上下文对象，应包含所需的属性
 * @returns {Object} 包含所需属性的新对象，包括用户信息和更新标签页的方法
 */
const mapToProps = (context) => {
    return {
        user: context.user, // 从上下文中提取用户信息
        updateTab: context.updateTab // 从上下文中提取更新标签页的方法
    }
}

class FormSchemaManage extends Component {

    constructor(props) {
        super(props)
        this.state = {
            editKey: new Date().getTime(),
            addFormVisual: false
        }
    }

    editForm = (code) => {
        this.setState({
            editKey: new Date().getTime(),
        })
        this.props.updateTab && this.props.updateTab({
            label: `表单配置${code}`,
            key: 'formSchemaEdit',
            component: (
                <FormBuilder
                    key={new Date().getTime()}
                    code={code}
                />
            )
        })
    }

    exportForm = async (code) => {

    }

    async componentDidMount() {
    }

    actionColumns = (columns, data) => {
        columns.push({ title: '操作', dataIndex: 'edit' })
        data = data.map(item => {
            item.edit = (
                <div className='form-schema-manage-col-ope'>
                    <TableButton onClick={async () => { this.editForm(item.code) }}>修改</TableButton>
                    <Popconfirm
                        title='模板删除'
                        description={`确定要删除表单模板${item.code}吗？`}
                        onConfirm={async () => {
                            if (await deleteSchema(item.id)) {
                                this.queryList.onQuery()
                                message.success('删除成功')
                            } else {
                                message.warning('删除失败')
                            }
                        }}
                        okText='确认'
                        cancelText='取消'
                    >
                        <TableButton>删除</TableButton>
                    </Popconfirm>
                    <TableButton onClick={async () => { this.exportForm(item.code) }}>导出</TableButton>
                </div>
            )
            return item
        })
        return { newColumns: columns, newData: data }
    }

    render() {
        return (
            <>
                {
                    this.state.addFormVisual ?
                        <FormBuilder onCancel={() => {
                            this.queryList.onQuery()
                            this.setState({ addFormVisual: false })
                        }} /> : ''
                }
                <QueryList
                    queryCode='searchSchemaConfig'
                    actionColumns={this.actionColumns}
                    onAdd={() => { this.setState({ addFormVisual: true }) }}
                    ref={queryList => this.queryList = queryList}
                >
                </QueryList>
            </>
        )
    }
}

export default getContext(FormSchemaManage, mapToProps)